//登录
<template>
  <div>
      <div style="width:100%" class="bijin">
          <div class="l-wapper" style=" ">
              <div style="margin:0 auto">
                   <div class="illustration">
                            <img src="./../../assets/img/deng_lu_chahua.png" alt="">
                    </div>
                <b-col  class="wapper wapper-left">

                    <div class="login-title">
                        <p>{{$t('dl')}}</p>
                    </div>

                    <div class="form-tab">
                        <b-input-group>
                            <b-input-group-addon class="input-icon">
                                <!-- <img src="../../assets/img/icon-phone.png" alt=""> -->
                                {{$t('l_dlzh')}}
                            </b-input-group-addon>
                            <b-form-input v-model="account" :placeholder="$t('l_sjhyx')" style=" font-size:12px;padding-left: 0;border:none;margin: 0!important;border-bottom:2px solid #c3cde4;width:100%;background-color:transparent;outline:none!important;box-shadow: none;"></b-form-input>
                        </b-input-group>
                        <!-- <div class="tips-line">请输入您的账号</div> -->
                    </div>

                    <div class="form-tab">
                        <b-input-group>
                            <b-input-group-addon class="input-icon">
                                <!-- <img src="../../assets/img/icon-pwd.png" alt=""> -->
                                登录密码
                            </b-input-group-addon>
                            <b-form-input v-model="password" type="password" :placeholder="$t('l_qsrdlmm')" style="font-size:12px;padding-left: 0;border:none;border-bottom:2px solid #c3cde4;width:100%;background-color:transparent;outline:none!important;box-shadow: none;"></b-form-input>
                        </b-input-group>
                    </div>

                    <div class="login-bottom login-llll">
                        <!-- <div class="login-left">
                            <p>{{$t('l_myzh')}}？<a href="javascript:;" @click="gotoRoute('/register')">{{$t('l_qzc')}}</a></p>
                        </div> -->
                        <div class="login-right" style="margin-left: 220px; ">
                            <a href="javascript:;" @click="gotoRoute('/repwd')" style="font-size:12px">{{$t('l_wjmm')}}</a>
                        </div>
                    </div>

                    <div class="dianjianniu">
                        <button class="dianjianniu-btn" variant="success" :disabled="once" @click="handleLogin">{{$t('l_dl')}}</button>
                    </div>
                </b-col>
               
              </div>
          </div>
      </div>
      <phonecode-n v-if="yanzheng==1" v-bind:newlist="this.account"></phonecode-n>
  </div>
</template>

<script>
import mixins from "../../assets/js/mixin";
import { mapActions} from "vuex";
import { isEmail,isPhoneNum } from "../../assets/js/common";
import phonecode from "./phonecode";

export default {
    components:{
        'phonecode-n': phonecode,
    },
  mixins: [mixins],
  data() {
    return {
      msg: "登录",
      account:"",//账号
      password:"",//密码
      loginType:null,  //email || mobile

      once:false,

      redirect:"",  // 地址回调
      yanzheng:0,
      typeall:1//手机号是1，邮箱是2

    };
  },
  methods: {
    getLoginType(val){  // 获取账号类型
        if (isEmail(val)) {
           this.typeall = 2
            return "email"
        } else if(isPhoneNum(val)){
            return "mobile"
            this.typeall = 1
        }
    },
    handleLogin() {
      let _self = this;
      _self.loginType = _self.getLoginType(_self.account);
      if (isPhoneNum(_self.account)) {

      }else if (isEmail(_self.account)) {

      } else {
        //账号格式不正确
        _self.$swal(_self.$t('l_zhgsbzq'),{
					icon:'/static/img/tan_chuang.png'
				});
          return false;
      }
      if (_self.password == '') {
        // 请输入密码
        _self.$swal(_self.$t('l_qsrmm'),{
					icon:'/static/img/tan_chuang.png'
				});
          return false;
      }

      _self.ifLoadingChange(true);
      _self.getPublicKey().then((key) => {
        let encrypt = _self.$JSEncrypt;
        encrypt.setPublicKey(key);
        this.once = true;

        //获取登录密码
        // this.$http.post('/nb-web/api/user/verify/password',{
        this.$http.post('/nb-web/api/user/login',{
            account:this.account,
            password:encrypt.encrypt(this.password),
            type: 'mobile'
        }).then((res)=>{
          _self.once = false;
            if (res.data.code == '001') {  // 手机号码登录
              //this.yanzheng = 1;//短信验证
              _self.loginChange(true);
              window.location.href = window.location.origin + '/user';
            } else if (res.data.code == '049'){
                _self.$swal("对不起，您的账号还未审核通过!",{
                  icon:'/static/img/tan_chuang.png'
                });
            } else if (res.data.code == '005'){
              _self.$swal("用户名或密码错误!",{
                icon:'/static/img/tan_chuang.png'
              });
            }else{
              _self.$swal("密码错误!",{
					icon:'/static/img/tan_chuang.png'
				});
            }
        })
      });

    },
    ...mapActions(['accountTabActiveChange','loginChange','ifLoadingChange']),

  },
  created(){
      
      //当从登陆注册页本身前往登录页时，回调地址为trade
      if(this.$route.query.redirect=='/login' || this.$route.query.redirect =='/register' ){
                this.$route.query.redirect == "/trade"
      }else{
            this.redirect = this.$route.query.redirect || "";
      }
    
  },
  mounted(){
      document.onkeydown = (e)=>{
          if (e.keyCode === 13) {
              this.handleLogin();
          }
      }
  },
  beforeDestroy(){
      document.onkeydown = null;
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";


.xiu {
  display: none!important;
}
.deng_lu{
    display: none!important;
}
.zhu_ce{
    display:  block!important;
}
.bijin{
background:url('../../assets/img/zhu_ce_ye_bg.png') no-repeat;
background-size:100%; 
}
.l-wapper {
    margin-left:0;
     height:800px;
      
  .login-title {
      padding-bottom: 48px;
    
    p {
      
     font-family: PingFangSC-Semibold;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
      line-height: 46px;
    //   color: #2d6df0;
      cursor: pointer;
    
    }
  }
  .wapper-left{ 
  }
  .illustration{
    
    width:360px;
    height:438px;
    border-radius:5px;
    background:#D8D8D8;
    overflow: hidden;
    float: left;
    margin-left:29%;
    margin-top:3%;
    img{
        height:100%;
    }
}

  .input-icon{
    border:none;

    padding-left:0;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
    
   
}
  .login-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 15px 0;
    a {
      color: #315dcf;
      float:right;
    }
  }
}
.login-llll{
    text-align: right
}

.wapper{
    // position: absolute;
    float: left;
    width:348px!important;
    border-radius:5px;
    background:#e5e5e5!important;
    z-index: 10;
    padding:36px!important;
    margin-left:-4px!important;
}
.dianjianniu{
    margin-top:70px;
    margin-bottom:35px
}
.dianjianniu-btn{
    height:50px;
    width: 276px;
    cursor: pointer;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    letter-spacing: 0;
    border-radius: 10px;
    background: #67a1ff!important;
    box-shadow: 0!important;
    color: #fff;
    border:1px solid transparent;
    outline: none;
}
.l-wapper{
    
}
</style>
